<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Calendar" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>Title</title>
</head>
<body>


<jsp:include page="/WEB-INF/jsp/common/css_js.jsp"/>
<link href="<%=path%>/css/common.css" rel="stylesheet">
<div class="page-container">


    <table class="table">
        <thead>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>电话</td>
            <td>建筑名</td>
            <td>时间</td>
            <td>其它</td>
            <td>

                <a class="btn btn-success" href="javascript:" onclick="add()">添加</a>

            </td>

        </tr>

        </thead>
        <tbody>
        <c:forEach items="${OUT}" var="one">
            <tr id="b_${one.outId}">
                <td class="outId">${one.outId}</td>
                <td class="outName">${one.outName}</td>
                <td class="outTel">${one.outTel}</td>
                <td class="buildId">${one.buildId}</td>
                <td class="outTime">${one.outTime}</td>
                <td class="other">${one.other}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>


    <!-- 添加用的模态框 -->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">添加外来人员出入信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label>姓名</label>
                            <input type="text" name="outName" id="outName" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>联系电话</label>
                            <input type="text" name="outTel" id="outTel" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>宿舍楼</label>
                            <input type="text" name="buildId" id="buildId" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>时间</label>
<%--                            <input type="text" name="outTime" id="outTime" class="form-control">--%>
                            <input type="text" name="outTime" id="outTime" class="form-control" value="<%=new SimpleDateFormat("yyyy-MM-dd").format(Calendar.getInstance().getTime())%>">
                        </div>
                        <div class="form-group">
                            <label>备注</label>
                            <input type="text" name="other" id="other" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="add_do()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    function add() {
        $("#addModal").modal("show");//弹模态框
    }

    function add_do() {
        $.ajax({
            url: "addStranger",
            method: "post",
            dataType: "json",
            data: {
                outName: $("#outName").val(),
                outTel: $("#outTel").val(),
                buildId: $("#buildId").val(),
                outTime: $("#outTime").val(),
                other: $("#other").val()
            },
            success: function (data) {
                console.log(data);
                alert(data.msg)
            }
        });
    }

</script>
</body>
</html>
